<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自己手写首页商品</title>
  <link rel="stylesheet" href="css/首页.css">
  <!-- 轮播图 -->
  <script src="./js/animateBak.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/axios.min.js"></script>

</head>

<body>
  <!-- 头部 -->
  <div class="headerWarp">
    <div class="header">
      <div class="logo1"><img src="./images/header-1.jpg" alt=""></div>
      <div class="headerSearch">
        <input type="button" value="" class="searchBtn">
        <input type="text" placeholder="漫步者" class="wenzi">
      </div>
      <div class="shoping"><img src="./images/header-2.jpg" alt=""></div>
      <div class="headerend">
        <span>登录</span>
      </div>
    </div>
  </div>
  <!-- 轮播图 -->
  <link rel="stylesheet" href="./js/lunbo.js">
  <div class="bannerWarp">
    <div class="banner">
      <div class="box">
        <ul class="item">
          <li><img src="./images/banner-1.jpg" /></li>
          <li><img src="./images/banner-2.jpg" /></li>
          <li><img src="./images/banner-3.jpg" /></li>
          <li><img src="./images/banner-4.jpg" /></li>
          <li><img src="http://p3.music.126.net/83gg_sB4E54ICXPIASyytw==/109951167431328832.jpg" /></li>
          <li><img src="http://p4.music.126.net/yN8h8GHluzN_BVX6SGYFrQ==/109951167427675060.jpg" alt=""></li>
        </ul>
        <button id="leftBtn" class="leftBtn">&lt;</button>
        <button id="rightBtn" class="rightBtn">&gt;</button>
        <ul class="page">
          <li style="background-color: white">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="./js/lunbo.js"></script>

  <!-- 右侧固定 -->
  <div class="fixed">
    <ul>
      <li>查看营业执照</li>
      <li>100%正品</li>
      <li>七天无理由置换</li>
      <li> <img src="./images/header-2.jpg" alt=""></li>
      <li class="liend"> 
        <a href="#top" target="_self"> Top</a>
        </li>
    </ul>
  </div>


<!-- 热销榜 -->
<div class="hotWarp">
  <div class="hot">
    <ul>
      <li>
       <div class="hotLi">
        <img src="./images/hot-1.jpg" alt="">
         <span><strong><a href="https://music.163.com/store/product/column?id=55001&title=%E7%83%AD%E9%94%80%E7%88%86%E5%93%81">热销爆品</a> </strong> </span>
       </div>
      </li>
      <li>
        <div class="hotLi">
         <img src="./images/hot-2.jpg" alt="">
          <span><strong> <a href="https://music.163.com/store/product/variouskind?cid=1008002&title=IP%E5%91%A8%E8%BE%B9">ip周边</a></strong> </span>
        </div>
       </li>
       <li>
        <div class="hotLi">
         <img src="./images/hot-3.jpg" alt="">
          <span><strong> <a href="https://music.163.com/store/product/variouskind?cid=101000&title=%E6%95%B0%E7%A0%81%E5%BD%B1%E9%9F%B3">数码影音</a></strong> </span>
        </div>
       </li>
       <li>
        <div class="hotLi">
         <img src="./images/hot-4.jpg" alt="">
          <span><strong> <a href="https://music.163.com/#/login?targetUrl=https%3A%2F%2Fmusic.163.com%2Fstore%2Fproduct">云备商城</a></strong> </span>
        </div>
       </li>
    </ul>
  </div>
</div>
<!-- 第四模块 -->
<div class="fourWarp">
<div class="four">
  <div class="box10"><img src="./images/box-11.jpg" alt=""></div>
  <div class="box11"><img src="./images/box-12.jpg" alt=""></div>
</div>
</div>

<!-- 热门商品 -->
<div class="shopingWarp">
  <div class="remen">
    <h2>热门商品</h2>
    <ul id="plist">
       <!-- <li>
        <img src="./images/shoping-1.jpg" alt="">
        <p>网易云商品</p>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> -->
    </ul>
  </div>
</div>
<script src="./js/remen.js"></script>
<script>
  console.log(localStorage.getItem("id"))
</script>

<div class="ban2Warp">
  <div class="ban2">
    <img src="./images/bannerMiddle.jpg" alt="">
  </div>
</div>
<!-- 脚部导航栏 -->
  <div class="footerWarp">
    <div class="footer">
      <div class="footerLeft">
        <div class="footerTop">
          <ul>
                <li><a href="https://st.music.163.com/official-terms/service">服务条款</a> </li>
                <li><a href="https://st.music.163.com/official-terms/privacy">隐私条款</a> </li>
                <li><a href="https://st.music.163.com/official-terms/children">儿童隐私政策</a></li>
                <li><a href="https://music.163.com/st/staticdeal/complaints.html">版权投诉指引</a></li>
                <li><a href="https://mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Mall">联系我们</a></li>
          </ul><br>
          <p>网易公司版权所有1997-2022杭州乐读科技有限公司运营：浙网文[2021]1186-054号
          </p>
          <p><span><a href="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/11202823048/cd21/9c11/b6ec/a94ff538fff84c7efd4529ed8f6b0c4e.png">食品经营许可证</a></span> 
            <span><a href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/12636982313/1de4/4c7e/43ac/fa093172a14ac87d48fc5447c6895d4b.jpg">出版物经营许可证</a></span> 
           <span><a href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/3920675333/e94d/cbaf/a3ad/5c24a5e9d195457ad1c6bb2f1274c807.jpg"></a>营业执照</span>  网络食品交易第三方平台提供者信息备案：浙网食A33010041进口冷链管理承诺书
          </p>
          <p>粤B2-20090191-18举报邮箱：工业和信息化部备案管理系统网站
          </p>
      </div>
      </div>
      <div class="footerRight">
        <ul>
          <li>
           <img src="./images/footer-1.jpg" alt="">
            <p>独立音乐人</p>
          </li>
          <li>
            <img src="./images/footer-2.jpg" alt="">
            <p>音乐专栏</p>
          </li>
          <li>
            <img src="./images/footer-3.jpg" alt="">
            <p>自媒体</p>
          </li>
          <li>
            <img src="./images/footer-4.jpg" alt="">
            <p>赞赏</p>
          </li>
        </ul>
      </div>
    </div>
  </div> 
</body>
</html>